import React, { Component, useEffect, useState } from 'react';
import { connect } from 'dva';
import { Card, Button, Table, Pagination } from 'antd'
import { useDebounce } from '../../utils/Debuence'

const mimeMap = {
    xlsx: 'application/vnd.ms-excel',
    zip: 'application/zip',
    jpg: 'image/jpeg'
}

const theProps = (state) => {
    return {
        list: state.echarts.list,
        total: state.echarts.total
    }
}

function Echarts(props) {
    const { dispatch, list, total } = props
    const [current, setCurrent] = useState(0)
    let ehartLimit = {
        current: 1,
        limit: 5
    }
    useEffect(() => {
        dispatch({
            type: 'echarts/getEchartInfo',
            payload: ehartLimit
        })
    }, [dispatch, ehartLimit])
    const onChange = (page) => {
        setCurrent(page)
        dispatch({
            type: 'echarts/getEchartInfo',
            payload: {
                current: page,
                limit: 5
            }
        })
    };
    const previewEchart = async (e) => {
        console.log(e)
        let dispatchData = {
            id: e.pictureId,
            type: 2
        }
        dispatch({
            type: 'echarts/downloadFile',
            payload: dispatchData
        })
    }

    const downLoadOne = async (e) => {
        let dispatchData = {
            id: e.pictureId,
            type: 3
        }
        dispatch({
            type: 'echarts/downloadFile',
            payload: dispatchData
        })
    }
    const downLoadTwo = async (e) => {
        let dispatchData = {
            id: e.pictureId,
            type: 4
        }
        dispatch({
            type: 'echarts/downloadFile',
            payload: dispatchData
        })
    }
    const downLoadThree = async (e) => {
        let dispatchData = {
            id: e.pictureId,
            type: 1
        }
        dispatch({
            type: 'echarts/downloadFile',
            payload: dispatchData
        })
    }
    const columns = [
        {
            title: '样品编号',
            dataIndex: 'pictureId',
            key: 'region',

        },
        {
            title: '操作',
            key: 'type',
            align: 'center',
            render: (e) => {
                let type = e.type
                switch (type) {
                    case 1:
                        return (<Button style={{ width: '10vw' }} type='primary' onClick={() => downLoadThree(e)}>
                            下载孔隙文档
                        </Button>)
                        break;
                    case 2:
                        return (<Button style={{ width: '10vw' }} type='primary' onClick={() => previewEchart(e)}>
                            下载矿物识别文档
                        </Button>)
                        break;
                    case 3:
                        return (<Button style={{ width: '10vw' }} type='primary' onClick={() => downLoadOne(e)}>
                            下载Qemscan文档
                        </Button>)
                        break;
                    case 4:
                        return (<Button style={{ width: '10vw' }} type='primary' onClick={() => downLoadTwo(e)}>
                            下载Fibsem文档
                        </Button>)
                        break;
                }

            }
        },
        {
            title: '类型',
            align: 'center',
            key: 'type',
            dataIndex: 'type',
            render: (e) => {
                let type = e
                switch (type) {
                    case 1:
                        return (
                            <p>孔隙分类</p>
                        )
                        break;
                    case 2:
                        return (
                            <p>矿物识别</p>
                        )
                        break;
                    case 3:
                        return (
                            <p>Qemscan</p>
                        )
                        break;
                    case 4:
                        return (
                            <p>Fibsem</p>
                        )
                        break;
                    default:
                        return (
                            <p>123</p>
                        )
                }

            }
        },

    ]
    const data = [
        {
            region: '1',
            userId: '1'
        }
    ]

    return (
        <Card
            title={<span style={{ fontSize: '20px' }}>报表管理</span>}
        >
            <Table
                columns={columns}
                dataSource={list}
                pagination={false}
            />
            <Pagination
                style={{ float: 'right', marginTop: '15px' }}
                defaultPageSize={5}
                current={current}
                onChange={onChange}
                total={total}
            />
        </Card>
    )
}

export default connect(theProps, null)(Echarts)